<template>
	<view class="d-inline-block">
		<button size="mini" class="mx-1 my-1 button-min" :style="getStyle"
			:class="bool?'main-bg-color':''">{{item.name}}</button>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "color-tag",
		data() {
			return {

			};
		},
		props: {
			item: {
				type: Object
			},
			color: {
				type: Boolean
			},
			bool: {
				type: Boolean
			}
		},
		computed: {
			getStyle() {
				if (this.color) {
					var borderColor = ['#EEA6AA', '#DD6A4B', '#98D5D8', '#9DBE93', '#BCCD99'];
					var backGround = ['#F8EAE9', '#FFBEC6', '#E8F6F6', '#E4F5E2', '#F2F6E8'];
					var index = Math.floor(Math.random() * borderColor.length);
					let bordercolor = borderColor[index];
					let backgroundcolor = backGround[index];
					return `border:2rpx solid ${bordercolor};background:${backgroundcolor}`
				} else {
					return `border:2rpx solid #ccc;background:#fff}`
				}
			}
		}
	}
</script>

<style scoped>
	.button-min {
		font-size: 24rpx;
	}
</style>